<template>
  <div class="login-wrapper">
    <el-form>
      <h1>新冠—物资管理系统</h1>
    </el-form>
    <el-form :model="user" :rules="rules" ref="logoForm" class="login-form">
      <el-form-item prop="username">
        <h3>系统登录</h3>
        <el-input
          prefix-icon="el-icon-user"
          suffix-icon=""
          type="text"
          v-model="user.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-suitcase"
          suffix-icon=""
          type="password"
          v-model="user.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="user.checked">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item class="btns">
        <el-button
          icon="el-icon-s-promotion"
          type="primary"
          @click="handleLogin"
          >登录</el-button
        >
        <el-button icon="el-icon-refresh" type="" @click="handleReset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        checked: false,
      },
      isShow: false,
      rules: {
        // 写校验规则
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  components: {
    Vcode,
  },
  mounted() {
    let checked = JSON.parse(localStorage.getItem("checked"));
    // console.log("checked:",checked);
    this.user.checked = checked;
    this.user.username = localStorage.getItem("username");
    this.user.password = localStorage.getItem("password");
  },
  methods: {
    handleReset() {
      this.user.username = "";
      this.user.password = "";
      return;
    },
    success() {},
    close() {},
    handleLogin() {
      console.log("点击了登录");
      this.$router.replace("/home")
    },
    // handleLogin(formName) {
    //   console.log("点击了登录....");
    //   this.$refs.logoForm.validate(async (valid) => {
    //     // console.log(valid); // false表示校验没有通过  true表示校验通过
    //     if (valid) {
    //       // alert('校验通过!');

    //       let rs = await this.$http.post("/api/user/login", {
    //         username: this.user.username,
    //         password: this.user.password,
    //       });
    //       // console.log(rs);
    //       if (rs.data.code === -1) {
    //         this.$message({
    //           message: rs.data.message,
    //           type: "warning",
    //         });
    //       } else {
    //         // 登录成功了
    //         // 将用户名保存到sessioniStorage中
    //         sessionStorage.setItem("username", this.user.username);

    //         // console.log("==>",this.user.checked);
    //         if (this.user.checked) {
    //           // 表示你勾选了记住密码
    //           localStorage.setItem("username", this.user.username);
    //           localStorage.setItem("password", this.user.password);
    //           localStorage.setItem("checked", this.user.checked);
    //         } else {
    //           // 没有勾选
    //           localStorage.removeItem("username");
    //           localStorage.removeItem("password");
    //           localStorage.removeItem("checked");
    //         }

    //         this.$message({
    //           message: rs.data.message,
    //           type: "success",
    //         });

    //         // 跳到后台首页面
    //         this.$router.replace("/home");
    //       }
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
  },
};
</script>


<style scoped>
.login-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.login-form {
  box-sizing: border-box;
  width: 450px;
  height: 350px;
  border-radius: 8px;
  padding: 30px;
  background-color: #fff;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
h1 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  color: #fff;
}
</style>